{extend name="platform/base" /}
{block name="resources"/}
<style>
p {
    margin: 6px 0 10px;
}
.label-radio {
    float: left;
    text-align: left;
    padding: 0 10px;
    overflow: hidden;
    color: #666;
    font-weight: normal;
    line-height: 32px;
    margin-bottom: 0px;
	font-size: 14px;
}
.label-radio input {
    margin-right: 5px;
}
.div_col{
	font-size: 12px;
    line-height: 32px;
    vertical-align: top;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    width: 75%;
    padding: 10px 0 10px 0;
}
p.hint{
	color:#bbb;
	font-size:14px;
	margin-left:10px;
}
</style>

{/block}
{block name="main"}
<section class="panel panel-default">
	<header class="panel-heading font-bold"> 图片裁剪设置 </header>
	<div class="panel-body">
		<form class="form-horizontal">
				<div class="form-group">
				
					<label class="col-sm-2 control-label">商品图片添加水印：</label>
					<div class="col-md-4" style="width:80%;">																	
						  <label for="navigationtype1" class="radio-label"><input type="radio" value="1" name="Watermark" id="Watermark" {if condition = "$info['Watermark']['Watermark'] eq 1"}checked{/if}/>开启</label>
					      <label for="navigationtype2" class="radio-label"><input type="radio" value="0" name="Watermark" id="Watermark" {if condition = "$info['Watermark']['Watermark'] eq 0"}checked{/if}/>关闭</label>
			 	    </div>
				
					<label class="col-sm-2 control-label">水印透明度：</label>
					<div class="col-md-4" style="width:80%;">
						<input id="transparency" type="number" min="0" step="1" value="{$info['transparency']['transparency']}" class="input-common harf" style="width:90px"/><em class="unit">%</em>
						<p style="color:#BBB;margin-top:10px;">水印的透明度，可选值为0-100。当设置为100时则为不透明。</p>
					</div>
				
					<label class="col-sm-2 control-label">水印位置：</label>
					<div class="col-md-4" style="width:80%;">
						{if condition ="$info['water_position']['water_position'] eq 1"}
						<label class="radio inline normal">
							<i class="checkbox-common selected">
								<input type="checkbox" name="water_position" value="1" checked>
							</i>
							左上角
						</label>
						{else/}
						<label class="radio inline normal">
							<i class="checkbox-common">
								<input type="checkbox" name="water_position" value="1">
							</i>
							左上角
						</label>
						{/if}
						{if condition ="$info['water_position']['water_position'] eq 3"}
						<label class="radio inline normal">
							<i class="checkbox-common selected">
								<input type="checkbox" name="water_position" value="3" checked>
							</i>
							右上角
						</label>
						{else/}
						<label class="radio inline normal">
							<i class="checkbox-common ">
								<input type="checkbox" name="water_position" value="3">
							</i>
							右上角
						</label>
						{/if}
						{if condition ="$info['water_position']['water_position'] eq 5"}
						<label class="radio inline normal">
							<i class="checkbox-common selected">
								<input type="checkbox" name="water_position" value="5" checked>
							</i>
							居中
						</label>
						{else/}
						<label class="radio inline normal">
							<i class="checkbox-common">	
								<input type="checkbox" name="water_position" value="5">
							</i>
							居中
						</label>
						{/if}
							<br/>
						{if condition ="$info['water_position']['water_position'] eq 7"}
						<label class="radio inline normal">
							<i class="checkbox-common selected">
								<input type="checkbox" name="water_position" value="7" checked>
							</i>
							左下角
						</label>
						{else/}
						<label class="radio inline normal">
							<i class="checkbox-common">
								<input type="checkbox" name="water_position" value="7">
							</i>
							左下角
						</label>
						{/if}
						{if condition ="$info['water_position']['water_position'] eq 9"}
						<label class="radio inline normal">
							<i class="checkbox-common selected">
								<input type="checkbox" name="water_position" value="9" checked>
							</i>
							右下角
						</label>
						{else/}
						<label class="radio inline normal">
							<i class="checkbox-common">
								<input type="checkbox" name="water_position" value="9">
							</i>
							右下角
						</label>
						{/if}
						<p style="color:#BBB;margin-top:10px;">请选择水印位置</p>
					</div>
				
				
					<label class="col-sm-2 control-label" style="margin-top: 8px;">缩略图：</label>
					<div class="div_col" >
						{if condition ="$info['thumb_type'] eq 2"}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="2" checked>缩放后填充</label>
						{else/}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="2">缩放后填充</label>
						{/if}
						{if condition ="$info['thumb_type'] eq 3"}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="3" checked>居中裁剪</label>
						{else/}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="3">居中裁剪</label>
						{/if}			
						{if condition ="$info['thumb_type'] eq 4"}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="4" checked>左上角裁剪</label>
						{else/}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="4">左上角裁剪</label>
						{/if}
						<br>
						{if condition ="$info['thumb_type'] eq 5"}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="5" checked>右下角裁剪</label>
						{else/}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="5">右下角裁剪</label>
						{/if}
						{if condition ="$info['thumb_type'] eq 6"}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="6" checked>固定尺寸缩放</label>
						{else/}
							<label class="label-radio"><input type="checkbox" name="thumb_type" value="6">固定尺寸缩放</label>
						{/if}
						<br>
						<p class="hint">请选择缩略图的类型。</p>
					</div>
					
					<div class="form-group">
                    <label class="col-lg-2 control-label">默认水印图片</label>
                         <div class="col-md-2">
						  <p class="img-box imglogo-box" id="imgWatermark_img_box">
						  {if condition="!empty($info.imgWatermark_img)"}
						  <img src="{:__IMG($info.imgWatermark_img)}" class="imglogo"/>
					  	  {/if}
						  </p>
                             <a href="javascript:void(0);" style="display:block;position:relative;z-index:1;">
                              <span style="width: 97px;height: 34px;position: absolute;left: 0;top: 0;z-index: 2;cursor: pointer;"> 
                              <input hidefocus="true" size="1" class="input-file" name="file_upload" id="imgWatermark_img" nc_type="change_store_label" type="file" style="width: 97px;height: 34px;padding: 0;margin: 0;border: none 0;opacity: 0;filter: alpha(opacity = 0);cursor: pointer;" onchange="imgUpload(this);"> 
							  <input type="hidden" id="imgWatermark_img_input" value="{$info.imgWatermark_img}" />
							  </span>
							  <a class="btn btn-default"><i class="fa fa-cloud-upload text"></i><span class="text">上传图片</span></a>
						  </a>
					  </div>
                </div>
				
				<dl style="display:none;">
				<dt>支持格式后缀：</dt>
				<dd>
					<textarea rows="2" id="upload_ext" class="textarea input-common" maxlength="50">{$info["upload_ext"]}</textarea>
					<p class="hint">支持上传文件格式后缀(后缀之间以,隔开)。</p>
				</dd>
				</dl>
				<dl style="display:none;">
					<dt>文件大小限制：</dt>
					<dd>
						<input id="upload_size" type="number" min="0" step="1" value="{$info['upload_size']}" class="input-common" />
						<p class="hint">注意考虑php.ini的配置(0为不限制)</p>
					</dd>
				</dl>
				
				
				
				</div>
	
                
			<div class="form-group">
				<div class="col-sm-4 col-sm-offset-2">
					<a href="javascript:void(0);" onclick="setConfigAjax()" class="btn btn-primary">提交</a>
				</div>
			</div>
		</form>
	</div>
</section>
<script src="ADMIN_JS/ajax_file_upload.js" type="text/javascript"></script>
<script src="__STATIC__/js/file_upload.js" type="text/javascript"></script>
<script type="text/javascript">
function imgUpload(event) {
	
	var fileid = $(event).attr("id");
	var data = { 'file_path' : UPLOADCOMMON };
	uploadFile(fileid,data,function(res){
		
		if(res.code){
			var html = '<img  src="'+ __IMG(res.data) +'" class="imglogo"/>';
			$('#' + fileid + '_box').html(html);
			$('#' + fileid + '_input').val(res.data);
			showTip(res.message,"success");
		}else{
			showTip(res.message,"error");
		}
	});
}

$(function(){
	$("input[name='thumb_type']").click(function(){
		$("input[name='thumb_type']").prop("checked", false);
		$(this).prop("checked", true);
	});
	$("input[name='water_position']").click(function(){
		$("input[name='water_position']").prop("checked",false);
		$(this).prop("checked", true);
		
	})
	
})


function setConfigAjax(){
	var thumb_type = $("input[name='thumb_type']:checked").val();
	var water_position = $("input[name='water_position']:checked").val();
	var Watermark = $("input[name='Watermark']:checked").val();
	var transparency = $("#transparency").val();
	var upload_size = $("#upload_size").val();
	var upload_ext = $("#upload_ext").val();
	var imgWatermark_img = $('#imgWatermark_img_input').val();
	$.ajax({
		type:"post",
		url : "{:__URL('PLATFORM_MAIN/config/pictureUploadSetting')}",
		data : {
			"thumb_type" : thumb_type,
			"water_position" : water_position,
			"Watermark" : Watermark,
			"transparency" : transparency,
			"upload_size": upload_size,
			"upload_ext" : upload_ext,
			"imgWatermark_img" : imgWatermark_img
		},
		success : function(data){
			if(data['code'] > 0){
				showMessage('success', data["message"], "{:__URL('PLATFORM_MAIN/config/pictureUploadSetting')}");
			}else{
				showMessage('error', data["message"]);
			}
		}
	});
}
</script>
{/block}
